<template>
	<view class="wrapper pingzheng">
		<div class="f32 center title cfff">先锋模范党员</div>
		<div class="swiper">
			<u-swiper height="580rpx" :list="list1" @change="e => currentNum = e.current" indicatorStyle="right: 12rpx">
				<template #indicator>
					<view class="indicator-num">
						<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list1.length }}</text>
					</view>
				</template>
			</u-swiper>
			<view class="indicator">
				<view class="indicator__dot" v-for="(item, index) in list1" :key="index"
					:class="[index === currentNum && 'indicator__dot--active']">
				</view>
			</view>
		</div>
		<div class="f24 tCenter">王小丽</div>
		<div class="f24 subtitle">党员要履行党员义务,做好模范带头作用。</div>
		<div class="f24 ml40 mr40 content">女，汉族，中共党员，1929年12月生，山西平顺人，第一届至
			第十三届全国人大代表。她积极维护新中国妇女劳动权利，倡
			导并推动“男女同工同酬”写入宪法。改革开放以来，她勇于
			改革，大胆创新，为发展农业和农村集体经济，推动老区经济
			建设和老区人民脱贫攻坚作出巨大贡献。
			荣获“全国劳动模范”“全国优秀共产党员”“全国脱贫攻坚
			‘奋进奖’”“改革先锋”等称号。
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				currentNum: 0
			}
		},
		watch:{
			currentNum:{
				handler(val){
					
				},
				immediate:true
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		line-height: 48rpx;
	}

	.subtitle {
		padding: 12rpx 0 14rpx;
		border-bottom: 2rpx solid #EF1814;
		width: max-content;
		margin: 0 auto 32rpx;
	}

	.swiper {
		width: 672rpx;
		margin: 40rpx auto 24rpx;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 14rpx;
			width: 14rpx;
			border-radius: 100px;
			background-color: rgba(0, 0, 0, 0.2);
			margin: 16rpx 9rpx;
			transition: background-color 0.3s;

			&--active {
				background-color: #EF1814;
			}
		}
	}

	.indicator-num {
		padding: 2px 28rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 100px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.title {
		height: 82rpx;
		background: url(@/static/dangJian/huo1.png);
		background-size: 100% 100%;
	}
</style>